<template>
    <view class="option dispaly-just-between ">
        <view class="dispaly-just-between input">
            <view class="left">
                <input v-model="commentContent" placeholder="说点什么..." />
            </view>
            <view class="right dispaly-center">
                <view class="icon">
                    <image src="/static/icon/emoji.png" />
                </view>
                <view class="icon">
                    <image src="/static/icon/add.png" />
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// 评论内容
const commentContent = ref<string>('')
</script>

<style lang="scss" scoped>
.option {
    padding: 0 36rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 184rpx;
    background: #FFFFFF;
    box-shadow: inset 0rpx 1rpx 0rpx 1rpx rgba(0, 0, 0, 0.16);

    .input {
        width: 100%;

        .left {
            flex: 3;
            margin-right: 19rpx;
        }

        .right {
            flex: 0.5;

            .icon:first-child {
                margin-right: 25rpx;
            }

            .icon {
                image {
                    width: 42rpx;
                    height: 42rpx;
                }
            }
        }
    }
}
</style>